Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Update flex parent demo to set min height for overlays #14900

Closed
wants to merge 1 commit into from
Closed

[docs] Update flex parent demo to set min height for overlays #14900

wants to merge 1 commit into from

Conversation

cherniavskii
Copy link
Member

@cherniavskii cherniavskii commented Oct 9, 2024 •
edited
Loading

@cherniavskii cherniavskii added docs Improvements or additions to the documentation component: data grid This is the name of the generic UI component, not the React module! labels Oct 9, 2024
@mui-bot
Copy link

mui-bot commented Oct 9, 2024

Deploy preview: https://deploy-preview-14900--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 05172a0

@cherniavskii cherniavskii requested a review from a team October 9, 2024 17:16
@cherniavskii cherniavskii mentioned this pull request Oct 9, 2024
Closed
1 task
michelengelen
michelengelen approved these changes Oct 9, 2024
View reviewed changes
Copy link
Member

@michelengelen michelengelen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :shipit:

@cherniavskii cherniavskii marked this pull request as ready for review October 9, 2024 17:19
cherniavskii
cherniavskii commented Oct 9, 2024
View reviewed changes
docs/data/data-grid/layout/FlexGrid.js
style={{
display: 'flex',
flexDirection: 'column',
minHeight: rows.length === 0 ? 200 : undefined,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rationale: #14901 (comment)

@k-rajat19
Copy link
Contributor

k-rajat19 commented Oct 9, 2024 •
edited
Loading

@cherniavskii I didn't notice that you have created this PR 😅, I have just created #14901 to address that issue
Should I close it?

@sampain
Copy link

sampain commented Oct 9, 2024

Would be great if the overlay had a minimum height instead. It's something you can do manually with some CSS.

Ex:

  '& .MuiDataGrid-overlayWrapper': {
    minHeight: '104px',
  },

Adding a minimum height on the flex container that you have to calculate based on the size of the overlay that you want seems a bit weird and it's a number that looks arbitrary. If I want a 104px overlay, I need to set a minHeight of 231px. 231px does't look great in the code and needs a comment above it to explain why it's such a specific number. It's also a number you have to change if you add a toolbar to the datagrid for example.

@cherniavskii cherniavskii mentioned this pull request Oct 30, 2024
Merged
@cherniavskii
Copy link
Member Author

Hey @sampain
I've opened #15202 to address this.

@cherniavskii
Copy link
Member Author

Closing in favor of #15202

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@michelengelen michelengelen michelengelen approved these changes

Assignees
No one assigned
Labels
component: data grid This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[data grid] v7.19.0 No minimum height for DataGrid doesn't show "No rows" anymore
5 participants
@cherniavskii @mui-bot @k-rajat19 @sampain @michelengelen